<%--@elvariable id="showNo" type="java.lang"--%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/pages/profile.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">

        .page-content {
            margin-left: 0 !important;
        }

        <shiro:hasRole name="用户">
        .page-content {
            margin-left: 9% !important;
            margin-right: 9% !important;
        }

        </shiro:hasRole>

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN CONTENT -->
<div class="page-content">
    <!-- BEGIN PAGE CONTENT-->
    <div class="row profile">
        <div class="col-md-12">
            <!--BEGIN TABS-->
            <div class="tabbable tabbable-custom tabbable-full-width">

                <ul class="nav nav-tabs">
                    <shiro:hasRole name="用户">
                        <li <c:if test="${showNo==1||showNo==8}">class="active"</c:if>>
                            <a href="#tab_1_1" onclick="setUrl(1)" data-toggle="tab">
                                <i class="fa fa-user"></i>
                                个人中心
                            </a>
                        </li>
                        <li <c:if test="${showNo==2}">class="active"</c:if>>
                            <a href="#tab_1_2" onclick="setUrl(2)" data-toggle="tab">
                                <i class="fa fa-pencil"></i>
                                我的笔记
                            </a>
                        </li>
                        <li <c:if test="${showNo==3}">class="active"</c:if>>
                            <a href="#tab_1_3" onclick="setUrl(3)" data-toggle="tab">
                                <i class="fa fa-heart"></i>
                                我的注册
                            </a>
                        </li>
                        <li <c:if test="${showNo==4}">class="active"</c:if>>
                            <a href="#tab_1_4" onclick="setUrl(4)" data-toggle="tab">
                                <i class="fa fa-star"></i>
                                我的收藏
                            </a>
                        </li>
                        <li <c:if test="${showNo==5}">class="active"</c:if>>
                            <a href="#tab_1_5" onclick="setUrl(5)" data-toggle="tab">
                                <i class="fa fa-upload"></i>
                                我的上传
                            </a>
                        </li>
                        <li <c:if test="${showNo==6}">class="active"</c:if>>
                            <a href="#tab_1_6" onclick="setUrl(6)" data-toggle="tab">
                                <i class="fa fa-book"></i>
                                学习记录
                            </a>
                        </li>
                        <li <c:if test="${showNo==7}">class="active"</c:if>>
                            <a href="#tab_1_7" onclick="setUrl(7)" data-toggle="tab">
                                <i class="fa fa-envelope"></i>
                                我的信箱
                            </a>
                        </li>
                    </shiro:hasRole>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane <c:if test="${showNo==1}">active</c:if>" id="tab_1_1">
                        <iframe id="ifram1" frameBorder="0" scrolling="no"></iframe>
                        <input type="hidden" id="tab_height_1" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==2}">active</c:if>" id="tab_1_2">
                        <iframe id="ifram2" frameBorder="0" scrolling="no"></iframe>
                        <input type="hidden" id="tab_height_2" value=""/>
                    </div>
                    <!--end tab-pane-->

                    <div class="tab-pane <c:if test="${showNo==3}">active</c:if>" id="tab_1_3">
                        <iframe id="ifram3" frameBorder="0"></iframe>
                        <input type="hidden" id="tab_height_3" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==4}">active</c:if>" id="tab_1_4">
                        <iframe id="ifram4" frameBorder="0"></iframe>
                        <input type="hidden" id="tab_height_4" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==5}">active</c:if>" id="tab_1_5">
                        <iframe id="ifram5" frameBorder="0"></iframe>
                        <input type="hidden" id="tab_height_5" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==6}">active</c:if>" id="tab_1_6">
                        <iframe id="ifram6" frameBorder="0"></iframe>
                        <input type="hidden" id="tab_height_6" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==7}">active</c:if>" id="tab_1_7">
                        <iframe id="ifram7" frameBorder="0"></iframe>
                        <input type="hidden" id="tab_height_7" value=""/>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane <c:if test="${showNo==8}">active</c:if>" id="tab_1_8">
                        <iframe id="ifram8" frameBorder="0" scrolling="no"></iframe>
                        <input type="hidden" id="tab_height_8" value=""/>
                    </div>
                    <!--end tab-pane-->
                </div>
            </div>
            <!--END TABS-->
        </div>
    </div>
    <!-- END PAGE CONTENT-->
</div>
<!-- END CONTENT -->

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    var tab_1_1 = 0, tab_1_2 = 0, tab_1_3 = 0, tab_1_4 = 0, tab_1_5 = 0, tab_1_6 = 0, tab_1_7 = 0, tab_1_8 = 0;
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        parent.browserSizeDeal(document.body.clientHeight);
        setUrl(${showNo});
    });

    function initShow(id) {
        $("iframe").parent('div.active').removeClass('active');
        $('#tab_1_' + id).addClass('active');
    }

    function setUrl(tabNo) {
        var $iframe = $("#ifram" + tabNo);
        if ($iframe.attr("src") == undefined || $iframe.attr("src") == "" || $iframe.attr("src") == "about:blank") {
            switch (tabNo) {
                case 1:
                    $iframe.attr("src", "person/myCenterDo");
                    break;
                case 2:
                    $iframe.attr("src", "person/myNoteDo");
                    break;
                case 3 :
                    $iframe.attr("src", "courseRegister/myRegister");
                    break;
                case 4:
                    $iframe.attr("src", "courseRegister/myCollect");
                    break;
                case 5:
                    $iframe.attr("src", "courseRegister/myUpload");
                    break;
                case 6:
                    $iframe.attr("src", "study/myStudyDo");
                    break;
                case 7:
                    $iframe.attr("src", "inbox/listAllInboxDo");
                    break;
                case 8:
                    $iframe.attr("src", "person/myInfo");
                    break;
            }
        } else {
            switch (tabNo) {
                case 1:
                    $iframe.attr("src", "person/myCenterDo");
                    setBodyHeight(1, $("#tab_height_1").val());
                    break;
                case 2:
                    setBodyHeight(1, $("#tab_height_2").val());
                    break;
                case 3 :
                    $iframe.attr("src", "courseRegister/myRegister");
                    setBodyHeight(1, $("#tab_height_3").val());
                    break;
                case 4:
                    $iframe.attr("src", "courseRegister/myCollect");
                    setBodyHeight(1, $("#tab_height_4").val());
                    break;
                case 5:
                    $iframe.attr("src", "courseRegister/myUpload");
                    setBodyHeight(1, $("#tab_height_5").val());
                    break;
                case 6:
                    $iframe.attr("src", "study/myStudyDo");
                    setBodyHeight(1, $("#tab_height_6").val());
                    break;
                case 7:
                    setBodyHeight(1, $("#tab_height_7").val());
                    break;
                case 8:
                    setBodyHeight(1, $("#tab_height_8").val());
                    break;
            }
        }
    }

    function browserSizeDeal(id, height) {
        var screenHeight = parent.document.documentElement.clientHeight - 45;
        height = height > screenHeight ? height : screenHeight;
        $("#tab_height_" + id).val(height);
        setBodyHeight(id, height);
    }

    function setBodyHeight(id, height) {
        var tab = $("#tab_1_" + id);
        tab.height(height);
        parent.browserSizeDeal(height);
    }
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>